<!DOCTYPE html>
<html lang="en">
<head>
	<title>Dojo Toolkit - ProgressBar test</title>

	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>

	<script src="boilerplate.js"></script>

	<style type="text/css">
		body {
			margin: 1em;
		}
		.smallred .dijitProgressBarTile {
			background:red;
		}
		.smallred .dijitProgressBarLabel {
			display:none;
		}
	</style>

	<script type="text/javascript">
		require([
			"doh/runner",
			"dojo/Deferred", "dojo/dom", "dojo/dom-class", "dojo/dom-geometry", "dojo/on", "dojo/parser", "dojo/query", "dojo/string",
			"dijit/registry", "dijit/ProgressBar", "dojo/domReady!"
		], function(doh, Deferred, dom, domClass, domGeometry, on, parser, query, string, registry, ProgressBar){

			var dir = domGeometry.isBodyLtr() ? "ltr" : "rtl";

			doh.register("parse", function(){
				return parser.parse();
			});

			doh.register("other setup", function(){
				// Stuff from the original test file.   Not sure if this is needed now that
				// the test is automated.

				// note that programmatic instantiation doesn't pull any parameters from the srcNodeRef, not even id
				var theBar = new ProgressBar({
					id: "testBar",
					width: 400,
					maximum: 256,
					duration: 2000,
					dir: dir,
					report: function(percent){
						return string.substitute("${0} out of ${1} max chars", [this.get('value'), this.maximum]);
					}
				}, dom.byId("testBar"));

				dom.byId("test").value="";
				dom.byId("progressValue").value = registry.byId("setTestBar").value;
				dom.byId("maximum").value = registry.byId("setTestBar").maximum;
				on(dom.byId("test"), "keyup", keyUpHandler);
				on(dom.byId("set"), "click", setParameters);
				on(dom.byId("startTimer"), "click", function(){ remoteProgress(registry.byId("timerBar")); } );

				// test 7
				new ProgressBar({
					style: "width:400px",
					indeterminate: true,
					dir: dir
				}, "pi");
			});

			doh.register("ProgressBar",[
				{
					name: "set valid value",
					runTest: function(){
						var progressBar = registry.byId("setTestBar");
						progressBar.set({maximum: 100, value: 58});

						doh.is("58", progressBar.progress);
						doh.is("58%", dom.byId("setTestBar_label").innerHTML);
						var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0];

						var width = visualProgress.style.width;
						width = width.substring(0, width.length-1);
						doh.t(57 < width <= 58); //IE thinks the width is 57.99
					}
				},
				{
					name: "aria roles and attribute",
					runTest: function(){
						var progressBar = registry.byId("setTestBar");
						doh.is("progressbar", progressBar.domNode.getAttribute("role"), "ProgressBar needs role=progressbar");
						doh.is(58, progressBar.domNode.getAttribute("aria-valuenow"), "expect aria-valuenow of 58");
						doh.is(0, progressBar.domNode.getAttribute("aria-valuemin"), "expect aria-valuemin of 0");
						doh.is(100, progressBar.domNode.getAttribute("aria-valuemax"), "expect aria-valuemax of 100");
						doh.is("setTestBar_label", progressBar.domNode.getAttribute("aria-labelledby"), "expect aria-labelledby on progressbar");
						progressBar = registry.byId("pi");
						doh.f(progressBar.domNode.getAttribute("aria-valuenow"), "indeterminate progressbars should not have aria-valuenow");
					}
				},
				{
					name: "set value too high",
					runTest: function(){
						var d = new doh.Deferred();

						var progressBar = registry.byId("setTestBar");
						progressBar.set({maximum: 100, value: 101});

						doh.is("100", progressBar.progress);
						doh.is("100%", dom.byId("setTestBar_label").innerHTML);
						var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0];
						doh.is("100%", visualProgress.style.width);
					}
				},
				{
					name: "set zero value",
					runTest: function(){
						var d = new doh.Deferred();

						var progressBar = registry.byId("setTestBar");
						progressBar.set({maximum: 100, value: 0});

						doh.is("0", progressBar.progress);
						doh.is("0%", dom.byId("setTestBar_label").innerHTML);
						var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0];
						doh.is("0%", visualProgress.style.width);
					}
				},
				{
					name: "set max value",
					runTest: function(){
						var d = new doh.Deferred();

						var progressBar = registry.byId("setTestBar");
						progressBar.set({maximum: 100, value: 100});

						doh.is("100", progressBar.progress);
						doh.is("100%", dom.byId("setTestBar_label").innerHTML);
						var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0];
						doh.is("100%", visualProgress.style.width);
					}
				},
				{
					name: "report callback",
					runTest: function(){
						var progressBar = registry.byId("testBar");
						progressBar.set({value: 79});
						doh.is("79", progressBar.progress);
						doh.is("79 out of 256 max chars", dom.byId("testBar_label").innerHTML);
						var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0];
						width = visualProgress.style.width;
						doh.is("30.8", width.substring(0,4));
					}
				},
				{
					name: "default maximum",
					runTest: function(){
						var progressBar = registry.byId("implied1");
						doh.is("50", progressBar.progress);
						doh.is("50%", dom.byId("implied1_label").innerHTML);
						var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0];
						doh.is("50%", visualProgress.style.width);

						progressBar = registry.byId("implied2");
						doh.is("50", progressBar.progress);
						doh.is("50%", dom.byId("implied2_label").innerHTML);
						visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0];
						doh.is("50%", visualProgress.style.width);
					}
				},
				{
					name: "set indeterminate, no label",
					runTest: function(){
						var progressBar = registry.byId("indeterminateBar");
						progressBar.set({indeterminate: true, label: ''});

						var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0];
						doh.is("100%", visualProgress.style.width);
						doh.t(domClass.contains(progressBar.domNode, "dijitProgressBarIndeterminate"), "has class dijitProgressBarIndeterminate");
					}
				},
				{
					name: "set determinate, no label",
					runTest: function(){
						var progressBar = registry.byId("indeterminateBar");
						progressBar.set({indeterminate: false, label: ''});
						doh.is("50%", dom.byId("indeterminateBar_label").innerHTML);

						var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0];
						doh.is("50%", visualProgress.style.width);
						doh.f(domClass.contains(progressBar.domNode, "dijitProgressBarIndeterminate"), "doesn't have class dijitProgressBarIndeterminate");
					}
				},
				{
					name: "set indeterminate, custom label",
					runTest: function(){
						var d = new doh.Deferred();

						var progressBar = registry.byId("indeterminateBar");
						progressBar.set({indeterminate: true, label: 'Loading...'});

						doh.is("Loading...", dom.byId("indeterminateBar_label").innerHTML);
						var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0];
						doh.is("100%", visualProgress.style.width);
						doh.t(domClass.contains(progressBar.domNode, "dijitProgressBarIndeterminate"), "has class dijitProgressBarIndeterminate");
					}
				},
				{
					name: "set determinate, custom label",
					runTest: function(){
						var progressBar = registry.byId("indeterminateBar");
						progressBar.set({indeterminate: false, label: 'Loading...'});

						doh.is("Loading...", dom.byId("indeterminateBar_label").innerHTML);
						var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0];
						doh.is("50%", visualProgress.style.width);
						doh.f(domClass.contains(progressBar.domNode, "dijitProgressBarIndeterminate"), "doesn't have class dijitProgressBarIndeterminate");
					}
				},
				{
					name: "programmatic indeterminate",
					runTest: function(){
						var progressBar = registry.byId("pi");
						var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0];
						doh.is("100%", visualProgress.style.width);

						doh.t(domClass.contains(progressBar.domNode, "dijitProgressBarIndeterminate"), "has class dijitProgressBarIndeterminate");

						progressBar = registry.byId("timerBar");
						doh.t(80 < progressBar.progress <= 100, "Timer progress was " + progressBar.progress);
					}
				},
				{
					name: "set zero maximum",
					runTest: function(){
						var d = new doh.Deferred();

						var progressBar = registry.byId("setTestBar");
						progressBar.set({maximum: 0, value: 0});

						doh.is("0", progressBar.progress);
						doh.is("0%", dom.byId("setTestBar_label").innerHTML);
						var visualProgress = query("div.dijitProgressBarFull", progressBar.domNode)[0];
						doh.is("0%", visualProgress.style.width);
					}
				},
				{
					name: "programmatic instantiation without params",
					runTest: function(doh){
						var pb, success;
						try{
							pb = new ProgressBar();
							pb.destroyRecursive();
							success = true;
						}catch(e){}
						doh.t(success, "Instantiation w/o params should not throw");
					}
				}
			]);

			doh.run();

			// An example of polling on a separate (heartbeat) server thread.  This is useful when the progress
			// is entirely server bound and there is no existing interaction with the server to determine status.

			// We don't have a server to run against, but a simple heartbeat implementation might look something
			// like this:

			// function getProgressReport(){
			//	var dataSource = "http://dojotoolkit.org";
			//	return dojo.xhrGet({url: dataSource, handleAs: "json", content: {key: "progress"}});
			// }

			// Instead, we'll just tick off intervals of 10

			var fakeProgress = 0;
			function getProgressReport(){
				var deferred = new Deferred();
				fakeProgress = Math.min(fakeProgress + 10, 100);
				deferred.resolve(fakeProgress+"%");
				return deferred;
			}

			function remoteProgress(bar){
				var _timer = setInterval(function(){
					var report = getProgressReport();
					report.then(function(response){
						bar.set({value: response});
						if(response == "100%"){
							clearInterval(_timer);
							_timer = null;
						}
					});
				}, 3000); // on 3 second intervals
			}

			function setParameters(){
				registry.byId("setTestBar").set({maximum: dom.byId("maximum").value, value: dom.byId("progressValue").value});
			}

			function keyUpHandler(){
				registry.byId("testBar").set({value:dom.byId("test").value.length});
				registry.byId("testBarInt").set({value:dom.byId("test").value.length});
				registry.byId("smallTestBar").set({value:dom.byId("test").value.length});
			}
		});
	</script>
</head>
<body class="claro" role="main">

	<script type=dojo/require>
		registry: "dijit/registry"
	</script>

	<h1 class="testTitle">Dijit ProgressBar Tests</h1>

	<h3>Test 1</h3>
	<label for="progressValue">Progress Value </label><input type="text" name="progressValue" id="progressValue" />
	<br>
	<label for="maximum">Max Progress Value </label><input type="text" name="maximum" id="maximum" />
	<br>
	<input type="button" name="set" id="set" value="set!" />
	<br>
	<div id="setTestBar" data-dojo-type="dijit/ProgressBar" data-dojo-props='style:"width:400px",
		maximum:200, value:"20" '></div>

	<h3>Test 2</h3>
	<label for="test">Write here: </label><input type="text" value="" name="test" maxLength="256" id="test" style="width:300px"/>
	<br />
	<br />
	<div id="testBar" style='width:300px'></div>
	<br />
	Small, without text and background image:
	<br />
	<div id="smallTestBar" data-dojo-type="dijit/ProgressBar" data-dojo-props='style:"width:400px; height:10px", "class":"smallred", maximum:256'></div>
	<br />
	Show decimal place:
	<div id="testBarInt" data-dojo-type="dijit/ProgressBar" data-dojo-props='places:1, style:"width:400px",
		maximum:256'></div>

	<h3>Test 3</h3>
	No explicit maximum (both 50%)
	<div id="implied1" data-dojo-type="dijit/ProgressBar" data-dojo-props='style:"width:400px",
		value:"50" '></div>
	<br />
	<div id="implied2" data-dojo-type="dijit/ProgressBar" data-dojo-props='style:"width:400px",
		value:"50%" '></div>

	<h3>Test 4</h3>
	<input type="button" name="startTimer" id="startTimer" value="Start Timer" />
	<div id="timerBar" data-dojo-type="dijit/ProgressBar" data-dojo-props='style:"width:400px", maximum:100, value:"0" '></div>

	<h3>Test 5 - indeterminate progess</h3>
	<input id="indeterminateButton1" type="button" value="Make Indeterminate (default blank label)"
		onclick="registry.byId('indeterminateBar').set({indeterminate: true, label: ''});" />
	<input id="labelButton1" type="button" value="Make Determinate (default percentage label)"
		onclick="registry.byId('indeterminateBar').set({indeterminate: false, label: ''});" />
	<input id="indeterminateButton2" type="button" value="Make Indeterminate With Label"
		onclick="registry.byId('indeterminateBar').set({indeterminate: true, label: 'Loading...'});" />
	<input  id="labelButton2" type="button" value="Make Determinate With Label"
		onclick="registry.byId('indeterminateBar').set({indeterminate: false, label: 'Loading...'});" />
	
	<div id="indeterminateBar" data-dojo-type="dijit/ProgressBar" data-dojo-props='style:"width:400px", value:"50" '></div>

	<h3>Test 6 - programatic indeterminate</h3>
	<div id="pi"></div>

</body>
</html>
